<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <tohead @add="addFn" />

    <!-- 主体部分 -->

    <tobody
      :list="list"
      @del="delFn"
      @change="changeFn"
      :type="type"
      @checkAll="checkAll"
    />

    <!-- 底部部分 -->
    <tofoot :list="list" @clear="clearFn" v-model="type" />
  </section>
</template>

<script>
import tohead from './components/head.vue'
import tobody from './components/body.vue'
import tofoot from './components/foot.vue'

export default {
  components: {
    tohead,
    tobody,
    tofoot,
  },
  
  data() {
    return {
      type: 'ken',
      list: JSON.parse(localStorage.getItem('todoList')) || [],
    }
  },
  methods: {
    delFn(id) {
      console.log(id)
      this.list = this.list.filter((item) => item.id !== id)
    },
    changeFn(id) {
      const res = this.list.find((item) => item.id === id)
      res.isDone = !res.isDone
    },
    addFn(name) {
      this.list.unshift({
        id: Date.now(),
        name,
        isDone: false,
      })
    },
    clearFn() {
      this.list = this.list.filter((item) => item.isDone === false)
    },
    // filterFn(type) {
    //   this.type = type
    // },
    checkAll(value) {
      this.list.forEach((item) => (item.isDone = value))
    },
  },
  watch: {
    list: {
      deep: true,
      handler(newValue) {
        localStorage.setItem('todoList', JSON.stringify(newValue))
      },
    },
  },
}
</script>

<style></style>
